<template>
  <div>
    <div class="subject-query">
      <el-form ref="subject_form" :model="subject" :rules="rules">
        <el-form-item label="科目" prop="km">
          <el-input v-model="subject.km" placeholder="请输入科目名称" clearable/>
        </el-form-item>
      </el-form>
      <el-button type="primary" plain @click="add">添加</el-button>
      <el-button type="success" plain @click="subject.dialogVisible=true">查看目前已有科目</el-button>
    </div>
    <el-drawer
      title="科目列表"
      :visible.sync="subject.dialogVisible"
      :append-to-body="true">
      <el-table
        :data="$store.state.subjects"
        class="table"
        border
        style="width: 80%"
        :header-cell-style="{textAlign: 'center'}">
        <!--      序号-->
        <el-table-column
          align="center"
          label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="科目"
          prop="km">
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import {subjectInsert} from "../util/request/subject";
import {message} from "../util/message";
import {is_empty} from "../util/funcutils";

export default {
  name: "subject",
  data() {
    return {
      subject: {
        km: '',
        dialogVisible: false
      },
      rules: {
        km: [{required: true, message: '请输入科目名称', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    add() {
      if (is_empty(this.subject.km)) {
        this.$message(message(false, '科目名称不可为空'))
        return
      }
      subjectInsert({km: this.subject.km})
        .then(res => {
          this.$message(message(res.data.success, res.data.msg))
          this.subject.km = ''
          console.log(res.data.success)
          if (res.data.success) {
            this.$store.dispatch('initSubjects')
            console.log('init')
          }
        })
    }
  }
}
</script>

<style scoped>
.el-form {
  width: 60%;
}

.subject-query {
  padding: 10px;
  border-radius: 5px;
  box-shadow: 3px 3px 10px lightgray;
  width: 40%;
  display: grid;
  justify-items: center;
  position: relative;
  left: 30%;
  top: 60px;
}

.el-button {
  width: 30%;
}

.el-button + .el-button {
  margin-left: 0;
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>
